<script setup lang="ts">
import { loginAPI } from '@/apis/user';
import { FORMDATA_KEY } from '@/constants';
import { useUserStore } from '@/stores/user';
import { onMounted, reactive, ref } from 'vue';
import { useRouter } from 'vue-router';


interface Formdata{
  username: string,
  password: string,
  remember?: boolean
}
/**
 * @description 登录表单的校验
 */
const formData = ref<Formdata>({
  username: "",
  password: "",
  remember: false,
});
/**
 * @description 登录表单的校验规则
 */
const rules = ref({
  username: [
    {
      required: true,
      message: "请输入账号",
      trigger: "blur",
    },
    {
      min: 3,
      max: 10,
      message: "长度在 3 到 10 个字符",
      trigger: "blur",
    },
  ],
  password: [
    {
      required: true,
      message: "请输入密码",
      trigger: "blur",
    },
    {
      min: 6,
      max: 16,
      message: "长度在 6 到 16 个字符",
      trigger: "blur",
    },
  ],
});
const loginFormRef = ref()
/**
 * 登录
 */
const router = useRouter()
// 3. 登录
const userToken = useUserStore()


interface dataType{
  token:string
}

const doLogin = ()=> {
  loginFormRef.value!.validate(async (valid: any) => {
    if (valid) {
     const res =  await loginAPI({username:formData.value.username,password:formData.value.password})
     const usertoken = res.data as unknown as dataType
     //存储token
     userToken.setToken(usertoken.token);
     console.log("登录的信息是"+JSON.stringify(userToken.token));
       // 确保登录流程ok后，并且账号密码正确的
       if (formData.value.remember) {
        localStorage.setItem(FORMDATA_KEY, JSON.stringify(formData.value))
      } else {
        localStorage.removeItem(FORMDATA_KEY)
      }
     /**
      * 跳转到首页
      */
      router.replace('/')
    }
  })
}
//进行数据的回填
onMounted(()=>{
  const getdata = localStorage.getItem(FORMDATA_KEY)
  if(getdata){
    //解析数据
    const userPassObj = JSON.parse(getdata)
    if(userPassObj){
      formData.value = userPassObj
    }
  }
})

</script>

<template>
  <div class="login_body">
    <div class="bg" />
    <div class="box">
      <div class="title">智慧园区-登录</div>
      <el-form ref="loginFormRef" :model="formData" :rules="rules">
        <el-form-item label="账号" prop="username">
          <el-input v-model="formData.username" placeholder="请输入账号" />
        </el-form-item>

        <el-form-item label="密码" prop="password">
          <el-input v-model="formData.password" placeholder="请输入密码"/>
        </el-form-item>

        <el-form-item prop="remember">
          <el-checkbox v-model="formData.remember" :checked	="formData.remember" >记住我</el-checkbox>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" class="login_btn" @click="doLogin">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.login_body {
  display: flex;
}

.bg {
  width: 60vw;
  height: 100vh;
  background: url("@/assets/login-bg.svg") no-repeat;
  background-position: right top;
  background-size: cover;
}

.box {
  margin: 200px 10% 0;
  flex: 1;

  .title {
    padding-bottom: 76px;
    font-size: 26px;
    font-weight: 500;
    color: #1e2023;
  }

  ::v-deep() {
    .ant-form-item {
      display: flex;
      margin-bottom: 62px;
      flex-direction: column;
    }

    .ant-form-item-label label {
      font-size: 16px;
      color: #8b929d;
    }

    .ant-input,
    .ant-input-password {
      border-radius: 8px;
    }
  }
}

.login_btn {
  width: 100%;
}
</style>
